<template>
  <div class="bpl2-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/wq-text-xq.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>

    <div class="bpl-container">
      <div class="lf">
        <div class="co-title-select">
          <el-select v-model="selectedValue" placeholder="请选择" :popper-append-to-body="false">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="xq-echart-box" id="xqEchart"></div>
      </div>
      <div class="rg">
        <div class="yq-item">
          <div class="left">
            <img src="@/assets/cockpit/subdivision/wq-icon-yq.png" alt="" />
          </div>
          <div class="right">
            <p class="text">固定资产投资</p>
            <p class="num">27.35</p>
          </div>
        </div>
        <div class="yq-item">
          <div class="left">
            <img src="@/assets/cockpit/subdivision/wq-icon-yq.png" alt="" />
          </div>
          <div class="right">
            <p class="text">财政总收入</p>
            <p class="num">27.35</p>
          </div>
        </div>
        <div class="yq-item">
          <div class="left">
            <img src="@/assets/cockpit/subdivision/wq-icon-yq.png" alt="" />
          </div>
          <div class="right">
            <p class="text">行政村等级公路通达率</p>
            <p class="num">27.35</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'
@Component({
  name: 'Item4',
  components: {}
})
export default class Item4 extends Vue {
  private num = 15
  private total = 20
  private percent = 90
  private lightLeval = 0
  private isActive = 1
  private selectedValue = 1
  private options = [
    {
      value: 1,
      label: '人均GDP'
    }
  ]

  clickActive(type: number) {
    this.isActive = type
  }

  mounted() {
    this.initVillage2()
  }

  initVillage2() {
    const myChart = echarts.init(document.getElementById('xqEchart') as HTMLElement)
    myChart.setOption({
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '0%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['长沙县', '浏阳市', '宁乡市'],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },

        axisLabel: {
          show: true,

          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#00eaff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: ['#000000'],
            width: 0,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177',
            width: 0 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          data: [8, 7, 3],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#BFFEFF'
              },
              {
                offset: 0.5,
                color: '#00FFAA'
              },
              {
                offset: 1,
                color: '#00FFAA'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl2-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 12px 16px;
  // background: url('~@/assets/cockpit/bpl1-bg.png') no-repeat right center/ 100% 100%;
  background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.co-title-unit {
  font-size: 12px !important;
  line-height: 20px;
  color: #dffeff;
}
.bpl-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  .lf {
    flex: 1;
    .co-title-select {
      width: 124px !important;
      margin-top: 16px;
    }
    .xq-echart-box {
      width: 100%;
      height: 85px;
      margin-top: 36px;
    }
  }
  .rg {
    flex: 1;
    .yq-item {
      display: flex;
      margin-top: 4px;
      .left {
        width: 48px;
        img {
          width: 100%;
        }
      }
      .right {
        margin: 4px 0px;
        .text {
          color: #bffeff;
          font-size: 12px !important;
        }
        .num {
          font-size: 20px !important;
          color: #fff;
        }
      }
    }
  }
}
</style>
